<template>
  <div>
    <div class="wrapper">
      <div class="line">
        <FormPanel ref="form" :list="formList" :cols="3" :formType="type" :isSubmitBtn="false" />
        <BreakSpace label="车型汇总" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
        <FilterTable
          ref="table"
          columnsRef="jzyContactsPanel"
          height="800"
          :columns="columns"
          :fetchapi="fetchApi"
          :params="fetchParams"
          :datakey="'rows'"
          selectionType="single"
          :onRowSelectChange="rowSelectHandle"
          :onColumnsChange="columns => (this.columns = columns)"
        >
          <template slot="moreActions">
            <span @click="removeRecordHandle">删除数据</span>
          </template>
        </FilterTable>
        <div
          :style="{
            position: 'absolute',
            left: 0,
            bottom: 0,
            right: 0,
            zIndex: 9,
            borderTop: '1px solid #e9e9e9',
            padding: '10px 20px',
            background: '#fff',
            textAlign: 'right'
          }"
        >
          <el-button @click="closeHandler">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // @author:@刘诗文
  import { dictionary } from '@/utils/dictMixin';
  import { authority } from '@/utils/authMixin';
  import { notifyAction, confirmAction } from '@/utils';
  import { phone, telePhone } from '@/utils/validate';
  import { getVehicleConfluence } from '@/api/repair/queryStatistics/queryAccounts';
  import { getModel } from '@/api/customerRepair/customerCare/insuranceDueRemind/index';

  export default {
    name: 'contactsPanel',
    components: {},
    mixins: [dictionary, authority],
    props: {
      type: {
        type: String
      },
      formData: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      this.selectedRow = null;
      return {
        formList: this.createFormList(),
        columns: this.createTableColumns(),
        fetchApi: getVehicleConfluence,
        fetchParams: { cardId: this.formData.vCardId }
      };
    },
    mounted() {
      // this.query()
      this.initSelect();
    },
    methods: {
      async initSelect() {
        const model = await getModel();
        console.log(model,'车系1111111');
        this.columns.find(x => x.dataIndex === 'MODEL').editItems = model.data.map(x => ({ text: x.MODEL_NAME, value: x.MODEL_ID + '' }));

      },
      createTableColumns() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: '车型名称',
            dataIndex: 'MODEL',
            sorter: true,
            filter: true,
            filterType: 'input',
            editType: 'select',
            editItems: []
          },
          {
            title: '辆次',
            dataIndex: 'HZTC',
            sorter: true,
            filter: true,
            filterType: 'number'
          },

          {
            title: '合计金额',
            dataIndex: 'HZJE',
            sorter: true,
            filter: true,
            filterType: 'number'
          }
        ];
      },
      createFormList() {
        return [

        ];
      },
      rowSelectHandle(rows) {
        if (!rows.length) {
          this.selectedRow = null;
        } else {
          this.selectedRow = rows[0];
        }
      },
      async removeRecordHandle() {
        try {
          await confirmAction('此操作将删除该记录, 是否继续?');
          const res = await removeContactRecord(this.selectedRow.id);
          if (res.resultCode === 200) {
            if (!res.errMsg) {
              notifyAction('删除数据成功！');
              // 执行刷新
              this.refreshHandle();
            } else {
              notifyAction(res.errMsg, 'warning');
            }
          }
        } catch (e) {}
      },
      async saveHandler() {
        try {
          // 获取表单控件的值，会执行表单校验，遵循错误前置的原则
          const [err, data] = await this.$refs.form.GET_FORM_DATA();
          if (err) return;
          const res = await saveContactInfo({ vCardId: this.formData.vCardId, vCardNo: this.formData.vCardNo, vCusName: this.formData.vCusName, ...data });
          if (res.resultCode === 200) {
            notifyAction('联系人保存成功！');
            // 执行刷新
            this.closeHandler('refresh');
          }
        } catch (e) {}
      },
      // 主页面刷新
      refreshHandle() {
        this.fetchParams = { ...this.fetchParams };
      },
      // 关闭面板
      closeHandler(type) {
        this.$emit('close', false, type);
      }
    }
  };
</script>

<style lang="less" scoped></style>
